<template>
	<view class="">
		<u-navbar bgColor="#2FCC71" leftIconColor="#fff" titleStyle="color:#fff" placeholder title="商品"
			:autoBack="true">
		</u-navbar>
		<view style="height: 80rpx;">
			<tui-tabs :tabs="tabList" isFixed :top="offsetTop" :currentTab="currentTab" selectedColor="#2FCC71"
				sliderBgColor="#2FCC71" @change="changeTab"></tui-tabs>
		</view>
		<view class="goods-list" v-for="(item, index) in dataList" :key="index" @click="toNavigate(item)">
			<view class="goods-list__box">
				<image class="goods-list__box__image" :src="item.recPic" mode="widthFix"></image>
				<view class="goods-list__box__right">
					<view class="goods-list__box__top">
						<view class="goods-list__box__title">{{ item.name }}</view>
					</view>
					<view class="goods-list__box__bot" style="margin-top: 15rpx;">规格：{{item.spc}}</view>
					<view style="display: flex;align-items: center;margin-top: 15rpx;">
						<view class="goods-list__box__bot">单价：{{item.costPrice}}</view>
						<view class="goods-list__box__bot" style="margin-left: 23rpx;">重量：{{item.weight}}斤</view>
					</view>
				</view>
			</view>
			<view class="item-price">￥{{ item.costPrice }}</view>
			<!-- <view class="item-but" v-if="item.audit==0">
				<view class="look-detail">审核</view>
			</view> -->
			<view class="item-but" v-if="item.status==0 && item.audit==1">
				<view class="look-detail" style="background: #F1F1F1;color: #666666;"
					@click.stop="changeStatus(item,index,'1')">下架</view>
				<view class="look-detail" style="margin-left: 23rpx;" @click.stop="goEdit(item)">编辑</view>
			</view>
			<view class="item-but" v-if="item.status==1 && item.audit==1">
				<view class="look-detail" style="background: #F1F1F1;color: #666666;"
					@click.stop="changeStatus(item,index,'0')">上架</view>
				<view class="look-detail" style="margin-left: 23rpx;" @click.stop="goEdit(item)">编辑</view>
			</view>

			<view class="item-but" v-if="item.audit==2">
				<view class="look-detail" @click.stop="goEdit(item)">编辑</view>
			</view>
		</view>
		<u-loadmore :status="status" />
		<movable-area class="fixed-box">
			<movable-view class="release-task" direction="all" :inertia="true">
				<image style="width: 100rpx;height: 100rpx;" src="@/static/procure/addGoods@3x.png" @click="typeOrder">
				</image>
			</movable-view>
		</movable-area>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0,
				audit: 0,
				goodstatus: 0,
				status: 'loading',
				dataList: [],
				pageNum: 1,
				pageSize: 20,
				tabList: [{
						name: '待审核',
						audit: 0,
						status: ''
					},
					{
						name: '审核未通过',
						audit: 2,
						status: ''
					},
					{
						name: '已上架',
						audit: 1,
						status: 0
					},
					{
						name: '已下架',
						audit: 1,
						status: 1
					},
				],

			}

		},
		computed: {
			offsetTop() {
				console.log(uni.getSystemInfoSync().statusBarHeight);
				return Number(uni.getSystemInfoSync().statusBarHeight + 44)
			}
		},
		created() {
			this.getList()
		},
		methods: {
			changeTab(e) {
				console.log(e);
				this.currentTab = e.index
				this.audit = this.tabList[e.index].audit
				this.goodstatus = this.tabList[e.index].status
				this.status = "loading"
				this.dataList = []
				this.pageNum = 1
				this.getList()
			},
			toNavigate(item) {
				uni.navigateTo({
					url: `/supplier/goodDetail/goodDetail?id=${item.id}`
				})
			},
			typeOrder() {
				this.$yrouter.push({
					path: '/supplier/addGoods/addGoods'
				})
			},
			goEdit(item) {
				uni.navigateTo({
					url: `/supplier/addGoods/addGoods?id=${item.id}`
				})
			},
			reshf() {
				this.status = "loading"
				this.dataList = []
				this.pageNum = 1
				this.getList()
			},
			async getList() {
				let res = await this.$apis.procurement.shopgoodlist({
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					audit: this.audit,
					status: this.goodstatus
				})
				this.status = 'loading'
				this.dataList = [...this.dataList, ...res.rows]
				if (this.dataList.length >= res.total || res.total == 0) {
					this.isLoadMore = true
					this.status = 'nomore'
				} else {
					this.status = 'loadmore' //继续加载
					this.isLoadMore = false //打开下拉开关
				}
			},
			botom() {
				if (!this.isLoadMore) {
					this.isLoadMore = true
					this.pageNum++
					this.getList()
				}
			},
			async changeStatus(item, index, num) {
				let res = await this.$apis.procurement.changeStatus({
					status: num,
					id: item.id,
				})
				this.dataList.splice(index, 1)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fixed-box {
		pointer-events: none;
		position: fixed;
		width: 100vw;
		height: calc(100vh - 500rpx);
		top: 300rpx;
		z-index: 999;
	}

	.release-task {
		width: 100rpx;
		height: 100rpx;
		right: 10rpx;
		left: auto;
		top: auto;
		bottom: 0;
		pointer-events: auto;

	}

	.goods-list {
		margin: 0 auto;
		margin-top: 31rpx;
		width: 688rpx;
		padding: 23rpx;
		background-color: #FFFFFF;
		border-radius: 19rpx;
		box-sizing: border-box;
		position: relative;

		.item-price {
			color: #E93325;
			font-size: 28rpx;
			font-weight: 500;
			position: absolute;
			top: 23rpx;
			right: 23rpx;
		}

		.goods-list__box {
			display: flex;

			.goods-list__box__image {
				width: 192rpx;
				height: 192rpx;
				border-radius: 12rpx;
				flex-shrink: 0;
			}

			.goods-list__box__right {
				flex: 1;
				margin-left: 15rpx;
				display: flex;
				flex-direction: column;
			}

			.goods-list__box__top {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}

			.goods-list__box__title {

				width: 300rpx;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.goods-list__box__bot {
				color: #999999;
				font-size: 23rpx;
			}




		}

		.item-but {
			display: flex;
			margin-top: 15rpx;
			justify-content: flex-end;
		}

		.look-detail {
			width: 162rpx;
			height: 58rpx;
			background: #2FCC71;
			border-radius: 29rpx;
			font-size: 23rpx;
			font-weight: bold;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>